import {  Upload, Input, Space  , Col, Row, DatePicker,Divider,Table,Button } from 'antd';

import React, { useState} from 'react';
const { RangePicker } = DatePicker;
import styles from './style.less'
import { SearchOutlined,UploadOutlined,FileAddOutlined,EditOutlined,FileExcelOutlined,RightOutlined} from '@ant-design/icons';
const ReportDocument: React.FC = () => {


  const dataSource = [
  
  ];
  for(let i=1;i<100;i++){
    dataSource.push({
      gatewayID: '用户报告'+i,
      instrumentAddress: '.pdf',
      equipmentModel: '二层',
      location: '二层',
      IOTCardNumber: '故障维修报告',
      type:'用户报告',
      publishTime: '2021-09-10 12:00:00',
      publishUser: '张三',
    })

  }

  const columns = [
    {
      title: '文件名称',
      dataIndex: 'gatewayID'
    },
    {
      title: '文件格式',
      dataIndex: 'instrumentAddress',
    },
    {
      title: '区域位置',
      dataIndex: 'equipmentModel',
    }, {
      title: '报告分类',
      dataIndex: 'IOTCardNumber',
    }, {
      title: '报告类型',
      dataIndex: 'type',
    }, {
      title: '发布时间',
      dataIndex: 'publishTime',
    }, {
      title: '发布人',
      dataIndex: 'publishUser',
    },
    {
      title: '',
      key: 'gatewayID',
        render: (text, record) => (
          <Space size="middle">
            <a>编辑</a>
            <a>删除</a>
          </Space>
        ),
      }
   
  ];


  const [value,setValue] = useState<number>(1)  
  function onChange(e) {
    console.log('radio checked', e.target.value);
    setValue(e.target.value)
     
  };
  const onSearch = (val) => {
    console.log('search:', val);
  }

  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        console.log(`${info.file.name} file upload failed.`);
      }
    },
  };
    return (
    
   
        <div> 
        <Row className={styles.alignJustifyCenter} style={{width:850}}> 区域位置  <div style={{    backgroundColor: '#40a9ff',borderRadius: '3px'}}>
                <Input bordered={false}  className={styles.inputBg} suffix={ <SearchOutlined onClick={onSearch}  style={{    fontSize: '20px'}}/> }
                />
              </div>
             发布时间 <div  className={styles.inputBg} >
                <RangePicker picker="month"   popupStyle={{ background: 'rgb(20, 49, 115)'}}       bordered={false} />
              </div>
              <Button className={styles.exportBtnBg} style={{marginRight:12}} type="primary" ><SearchOutlined /> 查询 </Button>
              <Upload {...props}>
                <Button className={styles.primaryBtnBg} type="primary" ><UploadOutlined /> 上传 </Button>
              </Upload>
          </Row>
          <Divider style={{    borderTop: '1px solid #355fb8'}}></Divider>
        <Row style={{margin:'-24px 0'}}>
          <Col xl={5} lg={5 } md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <h3>报告分类</h3>
           <Row>
            <Button className={styles.primaryBtnBg} style={{marginRight:12}} type="primary" ><FileAddOutlined />新增 </Button>
            <Button className={styles.primaryBtnBg} style={{marginRight:12}} type="primary" ><EditOutlined />修改 </Button>
            <Button className={styles.primaryBtnBg} style={{marginRight:12}} type="primary" ><FileExcelOutlined /> 删除 </Button>
           </Row>

           <Row className={styles.leftItem}>
              <span  className={styles.number}>00 </span>
              <Row  className={styles.text}><span>全部</span> <RightOutlined /></Row>
           </Row>
           
           <Row className={styles.leftItem}>
              <span   className={[styles.number, styles.number1].join(' ')}   >02 </span>
              <Row   className={[styles.text, styles.text1].join(' ')}  ><span>全部</span> <RightOutlined /></Row>
           </Row>
           
           <Row className={styles.leftItem}>
              <span   className={[styles.number, styles.number1].join(' ')}   >02 </span>
              <Row   className={[styles.text, styles.text1].join(' ')}  ><span>全部</span> <RightOutlined /></Row>
           </Row> 
       
              
          </Col>
          <Col xl={19} lg={19} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
              <Table dataSource={dataSource} columns={columns} />
          
          </Col>
       
        </Row>
  </div>
    );
};

export default ReportDocument;